<template>
  <div>
    <!-- 头部 -->
    <el-row class="home">
      <el-col class="box home-user-task-stats bgc1" :span="12">
        <el-col>
          <el-row class="title">运营人员（当天）</el-row>
          <el-col v-for="(item, index) in operateList" :key="index" :span="6" class="stats">
            <div class="item">
              <el-row class="num color1 text-shadow1">{{ item.count }}</el-row>
              <el-row class="text color2">{{ item.text }}</el-row>
            </div>
          </el-col>
        </el-col>
      </el-col>
      <el-col class="box home-sku-sale-stats bgc2" :span="12">
        <el-col>
          <el-row class="title">运维人员（当天）</el-row>
          <el-col v-for="(item, index) in maintenanceList" :key="index" :span="6" class="stats">
            <div class="item">
              <el-row class="num color3 text-shadow1">{{ item.count }}</el-row>
              <el-row class="text color4">{{ item.text }}</el-row>
            </div>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <!-- 工作状态 -->
    <el-row>
      <el-col :span="15">
        <el-row>
          <el-col :span="6">工作状态</el-col>
          <el-col :push="4" :span="6">
            <el-date-picker
              v-model="isValue"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-col>
          <el-col :push="10" :span="6">
            <el-radio-group v-model="isRadio">
              <el-radio-button label="周" />
              <el-radio-button label="月" />
              <el-radio-button label="年" />
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :push="12" style="height: 200px">
            <el-image style="margin-top: 100px" :src="img" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :push="3" :span="8">
        <el-row>
          <el-col :span="12">人效排名（月度）</el-col>
          <el-col :span="8">
            <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="运营人员" name="first">
              <el-image style="margin-top: 50px; margin-left: 50px" :src="img" />
            </el-tab-pane>
            <el-tab-pane label="运维人员" name="second">
              <el-image style="margin-top: 50px; margin-left: 50px" :src="img" />
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { userEfficiencyAPI, getCityListAPI } from '@/api/user'
// 年，月，周
import { yearStart, monthStart, weeksStart } from '@/utils/dayjs'
import dayjs from 'dayjs'
import empty from '@/assets/empty.png'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      userTime: {
        start: dayjs(new Date(new Date().toLocaleDateString()).getTime()).format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs(Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999))).format('YYYY-MM-DD HH:mm:ss')
      },
      operateObj: {},
      maintenanceObj: {},
      // isValue: null,
      start: weeksStart(),
      end: dayjs().format('YYYY-MM-DD'),
      isRadio: null,
      img: empty,
      cityList: [],
      value: '',
      activeName: 'first'
    }
  },
  computed: {
    operateList() {
      return [
        { text: '工单总数（个）', count: this.operateObj.total },
        { text: '完成工单（个）', count: this.operateObj.completedTotal },
        { text: '拒绝工单（个）', count: this.operateObj.cancelTotal },
        { text: '运营人员数（个）', count: this.operateObj.workerCount }
      ]
    },
    maintenanceList() {
      return [
        { text: '工单总数（个）', count: this.maintenanceObj.total },
        { text: '完成工单（个）', count: this.maintenanceObj.completedTotal },
        { text: '拒绝工单（个）', count: this.maintenanceObj.cancelTotal },
        { text: '运维人员数（个）', count: this.maintenanceObj.workerCount }
      ]
    },
    isValue: {
      get() {
        return [this.start, this.end]
      }
    }
  },
  watch: {
    isRadio(val) {
      console.log(val)
      if (val === '周') {
        this.start = weeksStart()
      } else if (val === '月') {
        this.start = monthStart
      } else if (val === '年') {
        this.start = yearStart
      }
    }
  },
  created() {
    // console.log(dayjs(new Date(new Date().toLocaleDateString()).getTime()).format('YYYY-MM-DD HH:mm:ss'))
    // console.log(dayjs(Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999))).format('YYYY-MM-DD HH:mm:ss'))
    this.userEfficiency()
    this.getCityList()
  },
  methods: {
    async userEfficiency() {
      const { data } = await userEfficiencyAPI(this.userTime)
      // console.log(data)
      this.operateObj = data[0]
      this.maintenanceObj = data[1]
    },
    async getCityList() {
      const { data } = await getCityListAPI()
      // console.log(data.currentPageRecords)
      this.cityList = data.currentPageRecords
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.home{
  .el-col{
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 30px;
  }
}
</style>
<style lang="scss">
@import "~@/styles/home.scss";
</style>
